{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}cpu监控{% endblock %}

{% block headerjs %}<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>{% endblock %}
{% block content %}
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="layui-container">
	  <div class="layui-row layui-col-space3">
	    <div class="layui-col-md6">
				<div id="disk" style="width: 100%;height:500px;"></div>
	    </div>
	    <div class="layui-col-md6">
        <div id="cpu" style="width: 100%;height:500px;"></div>
	    </div>
	  </div>
		<div class="layui-row layui-col-space3">
	    <div class="layui-col-md6">
				<div id="mem" style="width: 100%;height:500px;"></div>
	    </div>
	    <div class="layui-col-md6">
        <div id="" style="width: 100%;height:500px;"></div>
	    </div>
	  </div>
	</div>
	<!--磁盘监控-->
	<script>
	var diskChart = echarts.init(document.getElementById('disk'));
$.get('{% url 'monitor:data' %}?type=disk').done(function (data) {
    diskChart.setOption({
		    title: {
		        text: '磁盘监控'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['io_bo', 'io_bi']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: data.categories
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'io_bo',
		            type:'line',
		            stack: 'bo',
		            data: data.bo
		        },
				    {
		            name:'io_bi',
		            type:'line',
		            stack: 'bi',
		            data: data.bi
		        }
	      ]
    });
});
	</script>

	<!--cpu监控-->
	<script>
	var cpuChart = echarts.init(document.getElementById('cpu'));
$.get('{% url 'monitor:data' %}?type=cpu').done(function (data) {
    cpuChart.setOption({
		    title: {
		        text: 'cpu监控'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['cpu_sys', 'cpu_use', 'cpu_idle']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: data.categories
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'cpu_sys',
		            type:'line',
		            stack: 'sys',
		            data: data.cpu_sys
		        }, {
		            name:'cpu_use',
		            type:'line',
		            stack: 'use',
		            data: data.cpu_use
		        }, {
		            name:'cpu_idle',
		            type:'line',
		            stack: 'idle',
		            data: data.cpu_idle
		        }
	      ]
    });
});
	</script>

	<!--内存监控-->
	<script>
	var memChart = echarts.init(document.getElementById('mem'));
$.get('{% url 'monitor:data' %}?type=mem').done(function (data) {
    memChart.setOption({
		    title: {
		        text: 'mem监控'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['mem_buff', 'mem_free', 'mem_cache']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: data.categories
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'mem_free',
		            type:'line',
		            stack: 'sys',
		            data: data.mem_free
		        }, {
		            name:'mem_buff',
		            type:'line',
		            stack: 'use',
		            data: data.mem_buff
		        }, {
		            name:'mem_cache',
		            type:'line',
		            stack: 'idle',
		            data: data.mem_cache
		        }
	      ]
    });
});
	</script>
{% endblock %}